<template>
  <div class="contain">
    <div class="m-itemize">

      <div class="itemize-contain">
        <span class="itemize-name">行业</span>
        <ul class="itemize-list">
          <li
              v-for="(item, index) in industryTab"
              :key="index"
              class="itemize-total"
              :class="{ active: industrySel ===index }"
              @click="changeTab('industrySel',index)"
          >
            {{ item }}
          </li>
        </ul>
      </div>
      <div class="itemize-contain">
        <span class="itemize-name">热度</span>
        <ul class="itemize-list">
          <li
              v-for="(item, index) in hotTab"
              :key="index"
              @click="changeTab('hotSel',index)"
              class="itemize-total"
              :class="{ active: hotSel === index }"
          >
            {{ item }}
          </li>
        </ul>
      </div>
    </div>
    <!--搜索结果-->
    <div class="m-result-contain">
      <ul>
        <li
            class="position-intro"
            v-for="(item, index) in deliveryList"
            :key="index"
            @click="jumpUrl(item.sx_url)"
        >
          <div class="img-warp">
            <img :src="item.sx_pic" alt=""/>
          </div>
          <div class="position-right">
            <div class="position-name"><span class="name">{{ item.sx_name }}</span><span class="money">20k - 30k</span></div>
            <div class="position-desc" :title="item.sx_desc">
              {{item.sx_desc }}
            </div>
            <div class="tag">
              {{item.first_lab_name }}
            </div>
            <div class="position-tag">
              <!--<span class="tag" v-for="(item,index) in 3" :key="index"></span>-->
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: 'practiceDelivery',
  components: {
    /**/
  },
  data() {
    return {
      account: '',
      itemList: [],
      industryTab: ['金融', '教育'],
      industrySel: 0,
      hotSel: 0,
      hotTab: ['全部', '最新', '最热'],
      deliveryList: []
    };
  },
  watch: {
    /**/
    // comments: ""
    // create_date: "2020-07-13 21:58:27"
    // first_lab_id: "2"
    // first_lab_name: "CPA↵"
    // hangye_type: "2"
    // hot: "2"
    // id: "4"
    // modify_date: "2020-07-13 21:58:27"
    // status: 0
    // sx_desc: "1、整理审计底稿、整理装订会计凭证、打印复印抽查凭证等；↵2、协助项目小组完成现场审计工作；↵3、负责审计过程中与相关部门的协调和沟通；↵4、其他与内部审计相关的工作和领导交办的工作。↵"
    // sx_name: "江苏苏瑞华会计师事务所有限公司	财务、审计实习岗↵"
    // sx_pic: ""
    // sx_url: "实习4"
  },
  mounted() {
    this.doGetDelivery();
  },
  methods: {
    changeTab(tab, index) {
      this[tab] = index;
      this.deliveryList = [];
      this.doGetDelivery()
    },
    doGetDelivery() {
      this.$api.ajaxData({
        authorization: true,
        pathName: 'doGetDelivery',
        params: {
          hangye_type: this.industrySel,
          hot: this.hotSel
        },
        // method:'post'
      }).then(data => {
        this.deliveryList = data.obj
      }).catch(()=>{
          this.deliveryList = [];
      })
    },
    jumpUrl(url) {
        window.open(url)
    }
  }
};
</script>
<style scoped lang="scss">
.contain {
  .m-itemize {
    position: relative;
    padding: 0 0 10px;
    background: #fff;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    z-index: 1;

    .itemize-contain {
      max-width: 1366px;
      display: flex;
      min-height: 70px;
      padding: 10px 0;
      margin: 0 auto;
      align-items: center;
      box-sizing: border-box;

      &:not(:last-child) {
        border-bottom: 1px solid #f2f2f2;
      }

      .itemize-name {
        flex: 0 0 80px;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
      }

      .itemize-list {
        position: relative;
        display: flex;
        padding: 0 0 0 95px;
        flex-wrap: wrap;
        font-size: 13px;
        color: #333;

        li {
          padding: 0 10px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          border-radius: 5px;
          box-sizing: border-box;
          cursor: pointer;

          &:first-child {
            position: absolute;
            left: 0;
            top: 50%;
            width: 80px;
            margin: -15px 0 0 0;
          }

          &.active {
            color: #0079fe;
            background: #b3d7ff;
          }
        }
      }
    }
  }

  .m-result-contain {
    padding: 20px 0 0;

    ul {
      display: flex;
      flex-wrap: wrap;
      padding: 0 20px;

      .position-intro {
        position: relative;
        width: 31%;
        margin: 0 1% 20px;
        padding: 12px;
        border-radius: 10px;
        background: #fff;
        border: 1px solid rgba(242, 242, 242, 1);
        overflow: hidden;
        display: flex;
        align-items: center;
        &:hover {
          box-shadow: 2px 2px 10px rgba(242, 242, 242, 1);
        }
        .img-warp {
          position: relative;

          img {
            width: 65px;
            height: 65px;
            max-width: 65px;
            border-radius: 50%;
            border: 2px solid #F7F7F7;
          }
        }

        .position-right {
          padding: 15px 15px 0;

          .money {
            font-weight: bold;
            font-size: 16px;
            color: #E39386;
            float: right;
          }

          .position-name {
            height: 24px;
            font-size: 16px;
            line-height: 1.5;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #000;
            margin-bottom: 15px;

          }

          .position-desc {
            margin-bottom: 15px;
            font-size: 14px;
            color: #999999;
            @include ellipsis-line;
          }
          .tag {
            display: inline-block;
            padding: 1px 15px;
            margin: 0 5px 5px 0;
            line-height: 1;
            border: 1px solid rgba(255, 153, 0, 0.7);
            border-radius: 5px;
            font-size: 12px;
            color: rgba(255, 153, 0, 0.7);
          }
          .position-detail {
            float: right;
            width: 132px;
            height: 30px;
            line-height: 30px;
            border-radius: 15px;
            font-size: 13px;
            cursor: pointer;
            color: #fff;
            background: #ff8080;
            text-align: left;
            margin-right: -25px;
            padding-left: 25px;
          }


          .position-tag {
            .tag {
              border: 1px solid #F5BC70;
              display: inline-block;
              padding: 0 15px;
              color: #F5BC70;
              margin-right: 15px;
              margin-bottom: 15px;
              border-radius: 5px;
            }
          }
        }

      }
    }
  }
}
</style>
